import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 2.15
import '../component'
Rectangle {
	height: 60
	Layout.fillWidth: true
	color: "#dd1d56"
	
	RowLayout {
		anchors.fill: parent
		
		Item {
			Layout.preferredWidth: parent.width / 10
			Layout.fillWidth: true
		}
		MusicIconButton {
			source: '/resources/icon/previous'
			iconWidth: 32
			iconHeight: 32
			toolTip: '上一曲'
		}
		MusicIconButton {
			source: '/resources/icon/stop'
			iconWidth: 32
			iconHeight: 32
			toolTip: '暂停/播放'
		}
		MusicIconButton {
			Layout.preferredWidth: 50
			source: '/resources/icon/next'
			iconWidth: 32
			iconHeight: 32
			toolTip: '下一曲'
		}
		Item {
			Layout.preferredWidth: parent.width / 2
			Layout.fillHeight: true
			Layout.fillWidth: true
			Layout.topMargin: 25
			
			Text {
				id: nameText
				anchors.left: slider.left
				anchors.bottom: slider.top
				anchors.leftMargin: 5
				text: qsTr("醉酒仙")
				font.family:window.fontFamily
				color:Qt.color('#FFFFFF')
			}
			Text {
				id: timeText
				anchors.right: slider.right
				anchors.bottom: slider.top
				anchors.rightMargin: 5
				text: qsTr("00:00/05:30")
				color:Qt.color('#FFFFFF')
			}
			Slider {
				id: slider
				width: parent.width
				Layout.fillWidth: true
				height: 25
				background: Rectangle {
					x: slider.leftPadding
					y: slider.topPadding + (slider.availableHeight - height) / 2
					width: slider.availableWidth
					height: 4
					radius: 2
					color: Qt.color('#E9F4FF')
					Rectangle{
						width:slider.visualPosition * parent.width
						height:parent.height
						color: Qt.color("#73A7AB")
						radius:2
					}
				}
				handle: Rectangle {
					x: slider.leftPadding + (slider.availableWidth - width) * slider.visualPosition
					y: slider.topPadding + (slider.availableHeight - height) / 2
					width:15
					height:15
					radius:5
					color: Qt.color('#F0F0F0')
					border.color: Qt.color('#73A7AB')
					border.width:0.5
				}
			}
		}
		MusicIconButton {
			source: '/resources/icon/favorite'
			iconWidth: 32
			iconHeight: 32
			toolTip: '我喜欢'
		}
		MusicIconButton {
			source: '/resources/icon/repeat'
			iconWidth: 32
			iconHeight: 32
			toolTip: '循环播放'
		}
		Item {
			Layout.preferredWidth: parent.width / 10
			Layout.fillWidth: true
		}
	}
}